import React from 'react';
// import moment from 'moment';
import {Link } from 'react-router-dom';
// import ReactTooltip from 'react-tooltip';
import './css/main.less';
import http from '../../utils/http';
import {NavLink} from 'react-router-dom';
import Task from '../components/Task'
import Grade from '../components/Grade';
import Cover from '../components/Cover';
import { BasePic } from '../../utils/basic';

class Main extends React.Component {
  //courseList：课程信息
    state = {
        courseList:[],
        levelObj:{},
        kidsid:''
    }
    staticState = [
        {
            isShow:false,
            num:1,
            title:'完善小朋友信息',
            btn:true,
            href:'/admin/mine/'
        },
        {
            isShow:false,
            num:2,
            title:'完成英语水平测试',
            btn:false
        },
        {
            isShow:false,
            num:3,
            title:['参与体验课','购买常规课','走上学习正轨'],
            btn:false
        },
    ]
    getKidTest = () => {
        http
            .get('/user/find/kidsInfo')
            .then(data => {
                data = data  || {}
                // 1显 2btn删除 显 3显
                if(!data.isComplete){
                    this.staticState[0].btn = true;
                    this.staticState[1].btn = false;
                    this.staticState[0].isShow = true;
                    this.staticState[1].isShow = true;
                    this.staticState[2].isShow = true;
                }else{
                    //1不显
                    this.staticState[0].btn = false;
                    this.staticState[0].isShow = false;
                    //2显
                  if(!data.isLevelTest){
                      this.setState({
                          kidsid:data.id
                      })
                      this.staticState[1].btn = true;
                      this.staticState[1].isShow = true;
                      this.staticState[2].isShow = true;
                  }else{
                    //2不显
                    this.staticState[1].btn = false;
                    this.staticState[1].isShow = false;
                    this.staticState[2].isShow = false;
                  }
                }
                this.setState({
                  levelObj:data
                })
                if (data.isComplete && data.isLevelTest) {
                  this.getCourse();
                }
            }, err => {
        })
    }
    getCourse(){
      //得到孩子已买课程信息
        http
          .get('/course/find/myCourse')
          .then(data => {
                this.setState({
                  courseList: data || []
                })
          }, err => {
        })
    }
    hrefInfo(url){
      this.props.history.push(url);
    }
    // 初始化加载钩子
    componentDidMount() {
        this.getKidTest();
        this.setState({})
    }
    render() {
        return (
          <div className="row">
            <div className="admin-main">
              <div className="row" style={{marginBottom:"40px"}}>
                <div className="col-md-6 admin-height">
                  <div className="bordered">
                    <Cover text={this.staticState[0]} hrefInfo={()=>{this.hrefInfo('/admin/mine/')}}></Cover>
                    <div className="user-panel col-xs-12">
                      <div className="col-xs-4">
                        小朋友信息
                      </div>
                      <div className="col-xs-1 col-xs-offset-7" style={{padding:0,textAlign:"center",marginLeft:'57%'}}>
                        <NavLink to="/admin/mine/"><img alt='' src={require('../../images/icon/setting.png')} style={{width:"22px"}}/></NavLink>
                      </div>
                    </div>
                    <div className="user-info">
                      <div className="col-xs-6 col-xs-offset-3">
                      {
                       this.state.levelObj&&this.state.levelObj.gender === 2? 
                        <img className="img-circle" src={require('../../images/main/girl.png')} alt=''/>
                        :
                        <img className="img-circle" src={require('../../images/main/boy.png')} alt=''/>
                      }
                      </div>
                      <div className="col-xs-12">
                        <div className="user-english">{this.state.levelObj.englishName?this.state.levelObj.englishName:'Name'}</div>
                        <div className="kidsAge col-xs-12">
                          <span className="col-xs-6">{Number(this.state.levelObj.gender?this.state.levelObj.gender:1)===1?'男孩':'女孩'}&nbsp;</span>
                          <span className="col-xs-6">{this.state.levelObj.age>0?this.state.levelObj.age:'0'}岁</span>
                        </div>
                      </div>
                      <div className="col-xs-12 pride">
                        <span className="pride-Img"><img src={require('../../images/icon/provide1.png')} style={{width:"30px",marginTop:"-2px"}} alt=''/>
                          {/* {this.state.levelObj.stars?this.state.levelObj.stars:' 0'} */}
                        </span>
                        <span className="pride-Img"><img src={require('../../images/icon/provide2.png')} style={{width:"28px",marginTop:"-2px"}} alt=''/>
                          {/* {this.state.levelObj.medals?this.state.levelObj.medals:' 0'} */}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="col-md-6 admin-height">
                  <div className="bordered">
                    <Cover text={this.staticState[1]} hrefInfo={()=>{this.hrefInfo('/levelTest/')}}></Cover>
                    <div className="user-panel">
                      <div className="col-xs-4">
                        学习进度
                      </div>
                    </div>
                        <Grade level={this.state.levelObj} hrefInfo={()=>{this.hrefInfo('/levelTest/')}}></Grade>
                    </div>
                </div>
              </div>
              <div className="cover-bordered">
                  <Cover text={this.staticState[2]} ></Cover>
                  <Task className="bordered" main={this.props.history}></Task>
              </div>
              {/* {
                  this.state.courseList && this.state.courseList.length>0 && this.state.courseList.map((value,index)=>{
                      return (
                          <div className="row" key={value.id}>
                              <div className="col-md-6">
                                <div className="user-footer bordered">
                                  <div className="user-panel"><span>我的课表</span></div>
                                  <div className="user-allbody">
                                    <div className="col-md-6"><span>课程类型</span> <label>{value.serviceName}</label></div>
                                  {
                                    value.productType === 2?
                                    <div className="col-md-6">
                                      <span>已上课时</span>
                                       <label><Link to="/admin/myclass">{value.attendedClass}</Link></label>
                                    </div>
                                    :''
                                  }
                                  <div className="col-md-6 col-md-offset-6"><span>剩余课时</span> <label>{value.residueClass}</label></div>
                                  <div className="col-md-12"><span>上课时间</span> 
                                  <label>
                                      {value.dayBucket && value.dayBucket.dayVal}
                                      {value.timeBuckets && value.timeBuckets.map((item,i)=>{
                                        return item.timeVal
                                      })}
                                    </label>
                                  </div>
                                </div>
                              </div>
                              <div className="col-md-6">
                                <div className="user-info bordered">
                                  <div className="col-xs-6">我的老师</div>
                                  
                                  <div className="col-xs-6 tel-mobile">
                                      <span data-tip={`tel:${value.headmasterVo && value.headmasterVo.mobile}`}>电话老师</span>
                                      <ReactTooltip place="bottom" type="warning" effect ="float"/>
                                  </div>
                                  <div className="col-xs-6">
                                  <img className="img-circle" src={value.myTeacherVo && value.myTeacherVo.headUrl}  alt=''/>
                                  <span>{value.myTeacherVo && value.myTeacherVo.teacherName}</span>
                                  </div>
                                  <div className="col-xs-6">
                                  <img className="img-circle" src={value.headmasterVo && value.headmasterVo.headUrl}  alt=''/>
                                  <span>{value.headmasterVo && value.headmasterVo.userName}</span>
                                  </div>
                                  <div className="col-xs-6">体验课老师</div>
                                  <div className="col-xs-6">体验课中教老师</div>
                                </div>
                              </div>
                            </div>
                    )
                  })
              } */}
              {
                  this.state.courseList && this.state.courseList.length>0 && this.state.courseList.map((value,index)=>{
                      return (
                          <div className="row" key={value.id} style={{margin:"30px 0 0 0"}}>
                              <div className="col-xs-12 col-sm-6 col-md-6" style={{maxWidth:"580px",padding:0}}>
                                <div className="user-footer bordered col-xs-12" style={{padding:0}}>
                                  <div className="user-panel"><span>我的课表</span></div>
                                  <div className="user-allbody">
                                    <div className="col-xs-12 teacher-title col-md-7" style={{paddingRight:0}}><span>课程类型</span> <label style={{marginLeft:"-4px"}}>{value.serviceName}</label></div>
                                      <div className="col-md-5 teacher-title">
                                        <span>剩余课时</span>
                                        <label className="timeAll" style={{color:"#527A86"}}>{value.residueClass}</label>
                                      </div>
                                   
                                    <div className={value.productType === 2?'col-xs-12 teacher-title col-md-7':'col-xs-12 teacher-title'} style={{paddingRight:0}}><span>上课时间</span>
                                      <label>
                                          {value.dayBucket && value.dayBucket.dayVal}
                                          ({value.timeBuckets && value.timeBuckets.map((item,i)=>{
                                            return item.timeVal
                                          })})
                                      </label>
                                    </div>
                                    {
                                    value.productType === 2?
                                      <div className="col-md-5 col-xs-12 teacher-title" style={{paddingRight:0}}><span>已上课时</span> 
                                        <label className="timeAll"><Link to={`/admin/myclass/?id=${value.id}`}>{value.attendedClass}</Link></label></div>
                                      :''
                                    }
                                    </div>
                                </div>
                              </div>
                              <div className="col-xs-12 col-sm-6 col-md-6" style={{maxWidth:"580px",padding:0,float:"right"}}>
                                <div className="user-footer bordered col-xs-12" style={{padding:0}}>
                                <div className="user-panel">
                                  <span className="col-xs-9 col-md-11" style={{padding:"0"}}></span>
                                  {/* 整个电话模块显示 */}
                                  <div className="col-xs-1 col-md-1 tel-show" style={{padding:0,display:"inline-block"}}>
                                    <img className="normal" alt='' src={require('../../images/icon/tel_normal.png')}/>
                                    <img className="hover" alt='' src={require('../../images/icon/tel_hover.png')}/>
                                    {/* 电话图片显示 */}
                                      <div className="place-bottom" style={{backgroundImage: `url(${require('../../images/main/tel.png')})`}}>{value.headmasterVo && value.headmasterVo.userName}  {value.headmasterVo && value.headmasterVo.mobile}</div> 
                                    </div>
                                </div>
                                <div className="user-allbody" style={{padding:"25px 0"}}>
                                      <div className="col-xs-12 class-teacher">
                                      {
                                        value.myTeacherVo?
                                          <div className="col-xs-12 col-md-5">
                                          {
                                            value.myTeacherVo.headUrl?
                                            <img className="img-circle img-width"  src={'//'+value.myTeacherVo.headUrl} alt=''/>
                                            :
                                            <img className="img-circle"  src={BasePic+'teacher-title.png'} alt=''/>
                                            
                                          }
                                            <span>{value.myTeacherVo && value.myTeacherVo.teacherName}</span>
                                          </div>
                                          :
                                          <div className="col-xs-12 col-md-5">
                                           <img className="img-circle"  src={BasePic+'teacher-title.png'} alt=''/>
                                            <span>Alds Jok</span>
                                          </div>
                                        }
                                        <div className="col-xs-12 col-md-7 text-teacher">{value.productType === 2?'外教老师':'体验课老师'}</div>
                                      </div>
                                      <div className="col-xs-12 class-teacher">
                                      {
                                        value.headmasterVo?
                                        <div className="col-xs-12 col-md-5">
                                        {
                                          value.headmasterVo.headUrl?
                                          <img className="img-circle img-width" src={'//'+value.headmasterVo.headUrl} alt=''/>
                                          :
                                          <img className="img-circle"  src={BasePic+'teacher-title.png'} alt=''/>
                                        }
                                          <span>{value.headmasterVo && value.headmasterVo.userName}</span>
                                        </div>
                                        :
                                          <div className="col-xs-12 col-md-5">
                                            <img className="img-circle"  src={BasePic+'teacher-title.png'} alt=''/>
                                            <span>Blds Jok</span>
                                          </div>
                                          }
                                        <div className="col-xs-12 col-md-7 text-teacher">{value.productType === 2?'中教老师':'体验课中教老师'}</div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        )
                    })
                  }
            </div>
          </div>
        );
      }
    }
export default Main;